<template>
  <div class="review-extract" v-loading="extractLoading" :element-loading-text='loadingText'>
    <el-card shadow="always" class="extract-card" v-loading="loading">
      <div class="review-project">
        <el-form label-width="80px">
          <el-form-item label="抽取项目:">
            <el-select placeholder="请选择抽取项目信息" v-model="projectId" clearable @change="handleExtractMessage">
              <el-option v-for="item in projectDataOptions" :key="item.id" :label="item.projectName" :value="item.id">
                {{ item.projectName }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="review-condition">
        <el-descriptions title="抽取条件" :column="1" border v-if="conditionAndAvoidData">
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleUpdate('1')">去修改</el-button>
          </template>
          <el-descriptions-item label="指定专家"
                                v-if="conditionAndAvoidData.expertExtractCondition&&conditionAndAvoidData.expertExtractCondition.length>0">
            <el-descriptions class="margin-top" v-for="item in conditionAndAvoidData.expertExtractCondition"
                             :key="item.expertId" size="small" :column="3" border>
              <el-descriptions-item label="专家姓名">{{ item.expertName }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{ item.expertIdNumber }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ item.expertPhone }}</el-descriptions-item>
            </el-descriptions>
          </el-descriptions-item>
          <el-descriptions-item label="其他条件"
                                v-if="conditionAndAvoidData.otherConditions&&conditionAndAvoidData.otherConditions.length>0">
            <el-descriptions class="margin-top" v-for="(item,index) in conditionAndAvoidData.otherConditions"
                             :key="index" size="small" :column="3" border>
              <el-descriptions-item label="专家分类">{{
                  item.categoryName ? item.categoryName : '暂无要求'
                }}
              </el-descriptions-item>
              <el-descriptions-item label="专家职称">{{
                  item.expertTitle ? item.expertTitle : '暂无要求'
                }}
              </el-descriptions-item>
              <el-descriptions-item label="抽取人数">{{ item.extractNumber }}人</el-descriptions-item>
            </el-descriptions>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="review-avoid">
        <el-descriptions title="回避条件" :column="1" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="handleUpdate('2')">去修改</el-button>
          </template>
          <el-descriptions-item label="指定回避专家"
                                v-if="conditionAndAvoidData.expertAvoid&&conditionAndAvoidData.expertAvoid.length>0">
            <el-descriptions class="margin-top" v-for="item in conditionAndAvoidData.expertAvoid" :key="item.expertId"
                             size="small" :column="3" border>
              <el-descriptions-item label="专家姓名">{{ item.expertName }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{ item.expertIdNumber }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ item.expertPhone }}</el-descriptions-item>
            </el-descriptions>
          </el-descriptions-item>
          <el-descriptions-item label="其他条件"
                                v-if="conditionAndAvoidData.extractAvoidOther&&
                                (conditionAndAvoidData.extractAvoidOther.avoidUnit||conditionAndAvoidData.extractAvoidOther.avoidRegion)">
            <el-descriptions class="margin-top" size="small" :column="1"
                             v-if="conditionAndAvoidData.extractAvoidOther&&conditionAndAvoidData.extractAvoidOther.avoidUnit"
                             border>
              <el-descriptions-item label="回避单位">
                {{
                  conditionAndAvoidData.extractAvoidOther ? conditionAndAvoidData.extractAvoidOther.avoidUnit : '暂无回避单位信息'
                }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="margin-top" size="small" :column="1" border
                             v-if="conditionAndAvoidData.extractAvoidOther&&conditionAndAvoidData.extractAvoidOther.avoidRegion">
              <el-descriptions-item label="回避地区">
                {{
                  conditionAndAvoidData.extractAvoidOther ? conditionAndAvoidData.extractAvoidOther.avoidRegion : '暂无回避地区信息'
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="review-button">
        <el-button @click="refreshData">刷新数据</el-button>
        <el-button type="primary" :disabled="!this.projectId" @click="confirmAndExtract">确认信息，开始抽取</el-button>
      </div>
      <ReviewExtractResult/>
    </el-card>
  </div>
</template>
<script>
import { getExtractionConditions, getProjectOptions } from '@/request/project/project-api'
import { getConditionAndAvoid } from '@/request/Extract/extractCondition-api'
import { ExtractExperts } from '@/request/Extract/extract-api'
import store from '@/store'
import ReviewExtractResult from '@/components/review/ReviewExtractResult.vue'

export default {
  components: {
    ReviewExtractResult
  },
  created () {
    this.initOptions()
  },
  inject: ['changeTab'],
  data () {
    return {
      loading: false,
      extractLoading: false,
      loadingText: '',
      projectDataOptions: null,
      projectId: null,
      isReady: false,
      conditionAndAvoidData: {}
    }
  },
  methods: {
    async initOptions () {
      let res = await getExtractionConditions()
      if (res && res.code === 200) {
        this.projectDataOptions = res.data
      }
    },
    async handleExtractMessage () {
      this.loading = true
      if (this.projectId) {
        let res = await getConditionAndAvoid(this.projectId)
        if (res && res.code === 200) {
          this.conditionAndAvoidData = res.data
        } else {
          this.$message.error('查询项目抽取条件失败')
        }
      } else {
        this.conditionAndAvoidData = {}
      }
      this.loading = false
    },
    handleUpdate (data) {
      this.changeTab(data)
    },
    refreshData () {
      this.conditionAndAvoidData = {}
      this.handleExtractMessage()
    },
    confirmAndExtract () {
      this.$confirm('确定开始抽取专家吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        this.extractLoading = true
        this.loadingText = '抽取中，请稍后'
        let res = await ExtractExperts(this.projectId)
        if (res && res.code === 200) {
          //更新数据
          this.openResultDialog()
          this.projectId = null
          this.projectDataOptions = {}
          await this.initOptions()
          this.refreshData()
          this.$message.success('抽取成功')
        } else {
          this.$message.error(res.msg ? res.msg : '抽取失败')
        }
        this.extractLoading = false
      }).catch((err) => {
        if (err === 'cancel') {
        } else {
          this.$message.error(err)
        }
        this.extractLoading = false
      })

    },
    openResultDialog () {
      store.commit('ReviewResult/changeShowExtractResultSync', true)
      store.commit('ReviewResult/changeShowResultProjectId', this.projectId)
    }
  }
}
</script>
<style scoped lang="less">
.review-extract {
  width: 100%;
  margin: 20px;

  .extract-card {
    margin-left: auto;
    margin-right: auto;
    width: 60%;

    .review-condition, .review-avoid {
      margin: 20px;
    }

    .review-button {
      text-align: center;
    }
  }
}
</style>
